<template>
  <view v-if="shenheStatus == 0" class="info">
    <view class="info-title flex-row" v-if="share_setting.level == 3">
      <navigator
        class="flex-x-center width"
        openType="redirect"
        url="/user/share-team/share-team?status=1"
      >
        <view :class="{ active: status == 1 }" class="info-text"
          >{{ share_setting.first_name || $t("share.first") }}({{
            first_count
          }})
        </view>
      </navigator>
      <navigator
        class="flex-x-center width"
        openType="redirect"
        url="/user/share-team/share-team?status=2"
      >
        <view :class="{ active: status == 2 }" class="info-text"
          >{{ share_setting.second_name || $t("share.second") }}({{
            second_count
          }})
        </view>
      </navigator>
      <navigator
        class="flex-x-center width"
        openType="redirect"
        url="/user/share-team/share-team?status=3"
      >
        <view :class="{ active: status == 3 }" class="info-text"
          >{{ share_setting.third_name || $t("share.third") }}({{
            third_count
          }})
        </view>
      </navigator>
    </view>
    <view class="info-title flex-row" v-else-if="share_setting.level == 2">
      <navigator
        class="flex-x-center width-50"
        openType="redirect"
        url="/user/share-team/share-team?status=1"
      >
        <view :class="{ active: status == 1 }" class="info-text"
          >{{ share_setting.first_name || $t("share.first") }}({{
            first_count
          }})
        </view>
      </navigator>
      <navigator
        class="flex-x-center width-50"
        openType="redirect"
        url="/user/share-team/share-team?status=2"
      >
        <view :class="{ active: status == 2 }" class="info-text"
          >{{ share_setting.second_name || $t("share.second") }}({{
            second_count
          }})
        </view>
      </navigator>
    </view>
    <view class="info-title flex-row" v-else-if="share_setting.level == 1">
      <navigator
        class="flex-x-center width-50"
        openType="redirect"
        url="/user/share-team/share-team?status=1"
      >
        <view :class="{ active: status == 1 }" class="info-text"
          >{{ share_setting.first_name || $t("share.first") }}({{
            first_count
          }})
        </view>
      </navigator>
    </view>

    <view
      class="info-content"
      :style="share_setting.level == 1 ? 'padding-top:0' : ''"
    >
      <view class="info-label" v-for="(item, index) of list" :key="index">
        <view class="info-up flex-y-center flex-row">
          <view class="info-img flex-grow-0">
            <image class="img" :src="item.avatar_url"></image>
          </view>
          <view class="info-text flex-grow-1">
            <view
              class="info-name flex-row"
              style="justify-content: space-between"
            >
              <view
                class="flex-grow-0 flex-y-center text-more"
                style="flex: 1; display: block"
              >
                {{ item.nickname }}</view
              >
              <view class="flex-grow-0 flex-y-center fs-sm"
                >{{ $t("share.spread") }}{{ item.child_count
                }}{{ $t("share.people") }}</view
              >
            </view>
            <!-- 备注 -->
            <view
              class=""
              v-show="item.remark_name !== '' && item.remark_name !== null"
            >
              ({{ item.remark_name }})
            </view>
            <view class="flex-grow-0 flex-y-center fs-sm"
              >{{ $t("share.spread") }}{{ item.child_count
              }}{{ $t("share.people") }}</view
            >
          </view>
        </view>
        <view v-if="item.level" style="padding: 5rpx 0"
          >会员等级：{{ item.level }}</view
        >
        <view v-if="item.share_level" style="padding: 5rpx 0"
          >分销商等级：{{ item.share_level }}</view
        >
        <view
          class=""
          style="
            padding: 10rpx 0;
            display: flex;
            justify-content: space-between;
          "
        >
          <view class="info-time"
            >{{ $t("share.regTime") }}：{{ item.time }}</view
          >
          <view
            @click="modifyRemarks(item.id, item.remark_name)"
            class=""
            style="color: blue; font-size: 27rpx"
          >
            修改备注
          </view>
        </view>
        <view class="info-down flex-y-center">
          <view class="info-left"
            >{{ $t("share.consume") }}{{ item.price
            }}{{ $t("order.integral3") }}</view
          >
          <view class="info-right">
            <view class="info-order"
              >{{ item.count }}{{ $t("share.orders") }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <view class="info-footer flex-row" v-if="is_no_more">
      <view class="info-before">
        <view class="info-border"></view>
      </view>
      <view class="info-t">{{ $t("home.noMore") }}</view>
      <view class="info-after">
        <view class="info-border"></view>
      </view>
    </view>
    <!-- 修改备注 -->
    <template>
      <view>
        <u-popup
          v-model="show"
          mode="center"
          border-radius="14"
          width="600rpx"
          height="420rpx"
          :mask-close-able="false"
          :closeable="true"
        >
          <view
            style="
              padding: 80rpx 30rpx 30rpx 30rpx;
              display: flex;
              align-items: center;
              margin-top: 50rpx;
            "
          >
            <view class="" style="width: 100rpx"> 备注: </view>
            <view class="" style="width: 440rpx">
              <u-input
                :focus="true"
                placeholder-style="#ccc"
                placeholder="请输入新的备注"
                :border="true"
                v-model="value"
              />
            </view>
          </view>
          <view
            class=""
            style="width: 400rpx; margin: 0 auto; margin-top: 50rpx"
          >
            <u-button @click="sureModify" type="error" shape="circle"
              >确定修改</u-button
            >
          </view>
        </u-popup>
      </view>
    </template>
    <view>
      <u-toast ref="uToast" />
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import shareApi from "@/api/share.js";

export default {
  components: { Shenhe },
  data() {
    return {
      // 弹出层
      show: false,
      value: "",
      id: null,

      status: 1,
      first_count: 0,
      second_count: 0,
      third_count: 0,
      list: [],
      is_no_more: false,
      share_setting: {},
      page: 1
    };
  },
  onReachBottom: function () {
    if (!this.is_no_more) {
      this.getList();
    }
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: this.$t("title.shareTeam")
    });
    if (option.status) {
      this.status = option.status;
    }
    this.share_setting = uni.getStorageSync("shareSetting");
    this.getList();
  },
  methods: {
    // 点击确定修改按钮
    sureModify() {
      shareApi
        .modifyName({
          id: this.id,
          remark_name: this.value
        })
        .then((res) => {
          if (res.code == 0) {
            this.getList();
            this.show = false;
            this.$refs.uToast.show({
              title: res.msg,
              type: "success"
            });
          }
        });
    },
    // 点击修改备注
    modifyRemarks(id, remark_name) {
      // 获取点击列id
      this.id = id;
      // 回显数据
      this.value = remark_name;
      this.show = true;
    },
    getList: function () {
      shareApi
        .getTeam({
          status: this.status,
          page: this.page
        })
        .then((res) => {
          if (res.code == 0) {
            this.first_count = res.data.first;
            this.second_count = res.data.second;
            this.third_count = res.data.third;
            if (res.data.list.length < 1) {
              this.is_no_more = true;
            } else {
              this.page++;
              this.list = this.list.concat(res.data.list);
            }
          }
        });
    }
  }
};
</script>

<style scoped>
.info {
  width: 100%;
}

.width {
  width: 33.33333333%;
  text-align: center;
}

.width-50 {
  width: 50%;
  text-align: center;
}

.width-100 {
  width: 100%;
  text-align: center;
}

.info .info-title .info-text.active {
  color: #ff4544;
  border-bottom: 4rpx #ff4544 solid;
}

.info .info-title {
  width: 100%;
  height: 100rpx;
  padding: 0 24rpx;
  border-bottom: 1rpx #e3e3e3 solid;
  font-size: 13pt;
  background-color: #fff;
  line-height: 80rpx;
  position: sticky;
  top: 0;
  left: 0;
}

.info-title .info-text {
  height: 100rpx;
  line-height: 100rpx;
}

.info .info-content {
  width: 100%;
  margin-bottom: 12rpx;
  /* padding-top: 100rpx; */
}

.info .info-content .info-label {
  width: 100%;
  background-color: #fff;
  padding: 0 24rpx;
  margin-bottom: 20rpx;
  border-bottom: 4rpx #eeeeee solid;
}

.info-label .info-up {
  width: 100%;
  height: 160rpx;
}

.info-label .info-down {
  width: 100%;
  height: 80rpx;
  color: #666;
}

.info-label .info-up .info-img {
  margin-right: 24rpx;
}

.info-up .info-img .img {
  width: 100rpx;
  height: 100rpx;
}

.info-up .info-text .info-name {
  color: #353535;
  margin-bottom: 16rpx;
}

.info-up .info-text .info-time {
  font-size: 9pt;
  color: #666666;
}

.info-down .info-left {
  width: 50%;
  height: 80rpx;
  line-height: 80rpx;
}

.info-down .info-right {
  float: right;
  height: 80rpx;
  width: 50%;
  line-height: 80rpx;
  text-align: right;
}

.info .info-footer {
  color: #bbb;
  text-align: center;
  width: 100%;
  padding: 0 100rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.info .info-footer .info-t {
  height: 60rpx;
  margin: 0 20rpx;
}

.info .info-footer .info-before {
  width: 168rpx;
  height: 60rpx;
}

.info .info-footer .info-after {
  width: 168rpx;
  height: 60rpx;
}

.info .info-footer .info-border {
  border-bottom: 1rpx #e3e3e3 solid;
  padding-bottom: 30rpx;
}
</style>
